import { useState } from 'react';

// 都是函数组件，一直写函数
export const App = () => {
  // 管理状态
  const [count, setCount] = useState(0);
  // string
  const [name, setName] = useState('Jack');

  const [isLoading, setIsLoading] = useState(false);

  // 数组
  const [likes, setLikes] = useState(['干饭', '敲代码']);
  const [likes2, setLikes2] = useState([{ name: 'Jack' }, { name: 'Rose' }]);
  // 对象
  const [obj, setObj] = useState({ name: 'Rose', age: 18 });
  // 事件处理函数
  const handleCount = () => {
    // 修改页面状态
    // setCount(count + 2);
    // // 修改name
    // setName('Rose');
    // // 修改数组两种方式1 直接创建新数组
    // // setLikes([...likes, '睡觉']);
    // // 修改数组两种方式2 直接修改原数组
    // 只要是引用类型，创建新对象，新数组
    // likes.push('睡觉');
    // setLikes([...likes, '睡觉']);
    // console.log(likes);
    // 修改对象
    // setObj({ ...obj, age: 28 });
  };

  // UI
  return (
    <div>
      <h3>{count}</h3>
      <h3>{name}</h3>
      <h3>{likes.join('=>')}</h3>
      {/* <div>
        {likes2.map((item, index) => (
          <h3 key={index}>{item.name}</h3>
        ))}
      </div> */}
      <h3>
        {obj.name}, {obj.age}
      </h3>
      <button onClick={handleCount}>修改</button>
      <div>{(() => console.log('render'))()}</div>
    </div>
  );
};
